
<template>
  <div class="login">
    <img src="../assets/素材/bg.png" alt="" />
    <div class="nr">
      <h3>房屋租房系统</h3>
      <p><span>用户名:</span><input type="text" v-model="txtn" /></p>
      <p><span>密 码:</span><input type="text" v-model="txtm" /></p>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      txtn: "",
      txtm: "",
    };
  },
  methods: {
    login() {
      if (!this.txtn.trim()) {
        alert("请输入用户名");
        return;
      }
      if (!this.txtm.trim()) {
        alert("请输入密码");
        return;
      }
      this.$router.push("/home");
    },
  },
};
</script>

<style lang='less' scoped>
.login {
  position: relative;
  img {
    width: 100%px;
  }
  .nr {
    border: 1px solid #000;
    width: 300px;
    height: 200px;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 45%;
    p {
      padding-top: 10px;
    }
    button {
      width: 200px;
    }
  }
}
</style>
